<!DOCTYPE html>
<html>
<head  xmlns:th="http://www.thymeleaf.org"
       xmlns="http://www.w3.org/1999/xhtml"
       lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-min.js"></script>
    <title></title>
</head>
<body>
<!--头部-->
<style>
    #logo > img{
        width: 50%;
        height: 80%;
    }

    #navbarSupportedContent  > #title-hover > li > a {
        text-decoration: none;
        transition: all 0.5s;
    }
    #navbarSupportedContent > #title-hover > li > a:hover{
        padding-left: 20px;
    }
    #navbarSupportedContent  span{
        font-size: 25px;
        padding-left: 20px;
    }
    #userTitle{
        margin-top: 5%;
    }
    #userTitle > div > span{
        font-size: 20px;
    }
</style>
<<<<<<< Updated upstream
<nav class="navbar navbar-expand-lg navbar-light border-danger" id="nav-title">
    <div id="logo" class="col-md-2" style="text-align:center;">
        <img src="/static/img/logo.png">
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul id="title-hover" class="navbar-nav mr-auto">
            <li class="nav-item">
                <span class="nav-link">大象云音乐</span>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/"> <span>首页</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link active" href="#"> <span>我的音乐</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/discovery"><span>推荐歌单</span></a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="/search">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" name="key" aria-label="Search">
        </form>
        <ul class="navbar-nav" id="log-btns">
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-primary" data-toggle="modal" data-target="#loginModel">登录</a>
            </li>
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-link" href="/sign/page">注册</a>
            </li>
            <li class="nav-item" th:if="${session.user != null}">
                <a class="btn btn-link" href="/logout">注销</a>
            </li>
            <li class="nav-item" th:if="${session.user != null && session.user.permission.equals('admin')}">
                <a class="btn btn-link" href="/admin/page">后台</a>
            </li>
        </ul>
    </div>
</nav>
<div id="userTitle" class="row">
    <div class="col-md-4" style="margin-left: 28%">
        <img src="/static/img/song1.jpg" style="border-radius: 100%; padding-left: 2%">
        <br>
        <br>
        <span style="padding-left: 8%">个人简介：</span>
        <br>
        <span  style="margin-left: -8%">这个人很懒，什么都没有留下~</span>
    </div>
    <div id="userInformation" class="col-md-4" style="margin-top:3%">
        <h2>
            这里是用户名
        </h2>
        <br>
        <br>
        <br>
        <button type="button" class="btn btn-primary">
            等级 <span class="badge badge-light">{{rank}}</span>
        </button>
        <button type="button" class="btn btn-primary">
            积分 <span class="badge badge-light">{{points}}</span>
        </button>
        <button type="button" class="btn btn-primary">
            评论数 <span class="badge badge-light">{{commentlen}}</span>
        </button>
    </div>
</div>
<br>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="user-tab" data-toggle="tab" href="#mySongs" role="tab"
                       aria-controls="user" aria-selected="true">我的歌曲</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="singer-tab" data-toggle="tab" href="#singer-tab" role="tab"
                       aria-selected="false">歌手</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="album-tab" data-toggle="tab" href="#album" role="tab"
                       aria-selected="false">专辑</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="mv" data-toggle="tab" href="#mv" role="tab"
                       aria-selected="false">mv</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-pane fade show active" id="mySongs" role="tabpanel" aria-labelledby="user-tab">
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col" v-for="title in titles">{{title}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="song in songs" >
                <th>1</th>
                <td>{{song.name}}</td>
                <td>{{song.singer}}</td>
                <td>{{song.style}}</td>
                <td>{{song.language}}</td>
                <td>{{song.rank}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
=======
        <nav class="navbar navbar-expand-lg navbar-light border-danger" id="nav-title">
            <div id="logo" class="col-md-2" style="text-align:center;">
                <img src="/static/img/logo.png">
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul id="title-hover" class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <span class="nav-link">大象云音乐</span>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="/"> <span>首页</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="/user/profile"> <span>我的音乐</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><span>推荐歌单</span></a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0" action="/search">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" name="key" aria-label="Search">
                </form>
                <ul class="navbar-nav" id="log-btns">
                    <li class="nav-item" th:if="${session.user == null}">
                        <a class="btn btn-primary" data-toggle="modal" data-target="#loginModel">登录</a>
                    </li>
                    <li class="nav-item" th:if="${session.user == null}">
                        <a class="btn btn-link" href="/sign/page">注册</a>
                    </li>
                    <li class="nav-item" th:if="${session.user != null}">
                        <a class="btn btn-link" href="/logout">注销</a>
                    </li>
                    <li class="nav-item" th:if="${session.user != null && session.user.permission.equals('admin')}">
                        <a class="btn btn-link" href="/admin/page">后台</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="userTitle" class="row">
            <div class="col-md-4" style="margin-left: 28%">
                <img src="/static/img/song1.jpg" style="border-radius: 100%; padding-left: 2%">
                <br>
                <br>
                <span style="padding-left: 8%">个人简介：</span>
                <br>
                <span  style="margin-left: -8%">这个人很懒，什么都没有留下~</span>
            </div>
            <div id="userInformation" class="col-md-4" style="margin-top:3%">
                <h2>
                    这里是用户名
                </h2>
                <br>
                <br>
                <br>
                <span>
                        等级：{{rank}}
                    </span>
                <br>
                <span>
                        积分：{{points}}
                    </span>
            </div>
        </div>
        <br>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="user-tab" data-toggle="tab" href="#mySongs" role="tab"
                               aria-controls="user" aria-selected="true">我的歌曲</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="singer-tab" data-toggle="tab" href="#singer-tab" role="tab"
                               aria-selected="false">歌手</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="album-tab" data-toggle="tab" href="#album" role="tab"
                               aria-selected="false">专辑</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="mv" data-toggle="tab" href="#mv" role="tab"
                               aria-selected="false">mv</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-pane fade show active" id="mySongs" role="tabpanel" aria-labelledby="user-tab">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col" v-for="title in titles">{{title}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="song in songs" >
                        <th>1</th>
                        <td>{{song.name}}</td>
                        <td>{{song.singer}}</td>
                        <td>{{song.style}}</td>
                        <td>{{song.language}}</td>
                        <td>{{song.rank}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
>>>>>>> Stashed changes
</body>
<script>
    var userInformation = new Vue({
        el:"#userInformation" ,
        data:{
            rank:0,
<<<<<<< Updated upstream
            points:0,
            commentlen:0
        },
        mounted: function () {
            this.getUserInformation();
            this.getComments();
        },
        methods: {
            getUserInformation : function(){
                var url = '/user/current';
                $.get(url, function (data) {
                    userInformation.rank = data['rank'];
                    userInformation.points = data['points'];
                });
            },
            getComments:function () {
                $.get('/user/current',function (result) {
                    $.get('/comments/user?name='+result.number,function (c) {
                        userInformation.commentlen = c.length;
                    });
                });
            }
=======
            points:0
        },
        mounted: function () {
            this.getUserInformation();
        },
        methods: {
            getUserInformation : function(){
               var url = '/user/current';
                   $.get(url, function (data) {
                   userInformation.rank = data['rank'];
                   userInformation.points = data['points'];
               });
           }
>>>>>>> Stashed changes
        }
    });
    var mySongs = new Vue({
        el:"#mySongs" ,
        data:{
            titles:['#', '歌名', '歌手', '风格', '语言', '需要等级'],
            songs: [],
        },
        mounted: function () {
            this.getMySongs();
        },
        methods: {
            getMySongs : function(){
                var url = '/song/likes';
                $.get(url, function (data) {
<<<<<<< Updated upstream
                    mySongs.songs = data['song'];
                });
=======
                    mySongs.songs = data;
                });

>>>>>>> Stashed changes
            }
        }
    });
</script>
</html>